<template>
    <div class="box">
        <van-sticky>
            <van-search v-model="title" placeholder="请输入搜索关键词" />
        </van-sticky>


        <div v-if="list.length > 0">
            <van-card v-for="(v, i) in list" :key="i" :num="v.goods_number" :price="v.goods_price" :title="v.goods_name"
                :thumb="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />

        </div>

        <div v-else>
            <van-empty description="没有找到相关商品 " />
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { searchApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

let title = ref('');
let pagenum = ref(1);
let list = ref([]);
const getsearchApi = () => {
    searchApi(title.value, pagenum.value).then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();

// setTimeout(() => {
//     watch(title, (newValue, oldValue) => {
//         getsearchApi();
//     })
// }, 5000)

import _ from 'lodash';

// _.debounce(calculateLayout, 150)
watch(title, _.debounce((newValue, oldValue) => {
    getsearchApi();
    list.value = [];
}, 1000)
)

// const pagenum = () => {

// }

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>